Nobody wants to serve a 💩 site, therefore having something lean and fast as possible is something we should all have in mind. With that said, we want to make sure we are loading what needs to be seen so that as the rest is coming in it is happening while the user is getting aquainted with the site and making a decison on what to do next.
server-side rendering as entered the chat
What is server side rendering (ssr)? Basically, you run React on Node before the request is served to the user and first rendering of website is sent down.
Having full interaction capapbilities may be the same or slower, but as for first sight... that should def be faster.
To get this rolling, anything that interacts with the DOM cannot be loaded in Node or it will break, so anyhing browsery (ie: analytics, etc) gets migrate over into another file. And that file is now swapped in to index.html
.
Next step is getting a file going that will run through, in this case, vite so then Node can do the thing and render the app.
Once Vite transpiles, Node will run it creating readable React markup for the user.
I've been mentioning node around, what's node without mentioning express. That's gotta come along for the ride too so npm i
that sucker.
Once that goes down, take a gander at that package.json
and set up your build
script(s), as well as, make sure you state module
as type
. In the intermediate React course I was working through this is what it looked like.
inside scripts
:
build:client": "vite build --outDir ../dist/client",
"build:server": "vite build --outDir ../dist/server --ssr ServerApp.jsx",
"build": "npm run build:client && npm run build:server",
outside scripts
:
"type": "module",
So, what was the purpose of all that? Well, one, the type
is to say well, the type :D as in modules are being used and not commonJS which I believe is the require
thing vs import
... but I'd have to double check that. The other, build, builds the app into assets that node can run.
lastly, the node server.
build:server
.
In the end, this was giving nextjs vibes lol